@page "/ParentComponent"

<h1>Parent-child example</h1>

<ChildComponent Title="Panel Title from Parent"
                OnClick="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

<p><b>@messageText</b></p>

@code {
    private string messageText;

    private void ShowMessage(MouseEventArgs e)
    {
        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
    }
}

<p>
    <code>ParentComponent</code> (<em>ParentComponent</em>; this page)
    embeds a child component into the page using the <code>&lt;ChildComponent&gt;</code>
    tag. The child component (<em>ChildComponent</em>) contains a
    Bootstrap-styled panel.
</p>
<p>
    The <code>Title</code> attribute and panel content are specified by the
    <code>&lt;ChildComponent&gt;</code> element. The <code>Title</code> attribute
    is a <i>component parameter</i>.
</p>

<h2>Parent component</h2>

<pre><code>&lt;ChildComponent Title="Panel Title from Parent" OnClick="@@ShowMessage"&gt;
    Content of the child component is supplied by the parent component.
&lt;/ChildComponent&gt;

&lt;p&gt;&lt;b&gt;@@messageText&lt;/b&gt;&lt;/p&gt;
    
@@code {
    private string messageText;

    private void ShowMessage(MouseEventArgs e)
    {
        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
    }
}</code></pre>

<h2>Child component</h2>

<pre><code>&lt;div class="panel panel-success"&gt;
    &lt;div class="panel-heading"&gt;@@Title&lt;/div&gt;
    &lt;div class="panel-body"&gt;@@ChildContent&lt;/div&gt;

    &lt;button class="btn btn-primary" @@onclick="OnClick"&gt;Trigger a Parent component method&lt;/button&gt;
&lt;/div&gt;

@@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public EventCallback&lt;MouseEventArgs&gt; OnClick { get; set; }
}</code></pre>
